<!--忘记密码-->
<template>
    <div class="forgotPassword">
        <p class="title">忘记密码</p>
        <div class="rung" @click="bindToSecurityCode">
            <div class="l">
                <img src="../assets/img/lockIcon.png">
                <span>通过安全码找回</span>
            </div>
            <div class="r"><img src="../assets/img/arrowIcon.png"></div>
        </div>
        <div class="rung me" @click="bindToContactUs">
            <div class="l">
                <img src="../assets/img/phoneIcon.png">
                <span>联系我们</span>
            </div>
            <div class="r"><img src="../assets/img/arrowIcon.png"></div>
        </div>
    </div>
</template>

<script>

    export default {
        data() {
            return {}
        },
        methods:{
            bindToContactUs(){
                this.$router.push("/contactus")
            },
            bindToSecurityCode(){
                this.$router.push("/securitycode")
            }
        }
    }
</script>

<style scoped lang="less">
    .forgotPassword {
        width: 100%;
        height: 100%;
        overflow: hidden;

        .title {
            font-size: 48px;
            font-family: PingFangSC-Semibold;
            font-weight: bold;
            color: rgba(29, 30, 44, 1);
            margin: 80px 0 79px 65px;
        }

        .rung {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 90px;
            box-sizing: border-box;
            background-color: #ffffff;
            padding-left: 66px;
            padding-right: 104px;
            margin-top: 15px;

            .l {
                display: flex;

                img {
                    width: 40px;
                    height: 40px;
                    margin-right: 29px;
                }

                span {
                    display: flex;
                    align-items: center;
                    font-size: 28px;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    color: rgba(29, 30, 44, 1);
                }
            }

            .r {
                img {
                    width: 23px;
                    height: 36px;
                }
            }
        }

        .me {
            .l {
                img {
                    width: 36px;
                    height: 36px;
                    margin-right: 36px;
                }
            }
        }
    }
</style>
